<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'montserrat', sans-serif;
            box-sizing: border-box;
            list-style: none;
        }

        #container {
            width: 60%;
            margin: 0 auto;
            padding: 20px 10px;
            border: 1px solid #07daa5;
            border-radius: 5px;
            box-shadow: 0 0 6px #00000070;
        }

        #header {
            margin: 10px 0;
            font-size: 2em;
            font-weight: bold;
            text-align: center;
        }

        #content {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        #content > .item {
            display: flex;
            line-height: 30px;
            flex-basis: 100%;
        }

        #content > .item > div:first-child {
            width: 20%;
            height: 100%;
            line-height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-weight: 200;
            padding-right: 20px;
        }

        #content > .item > div:nth-child(2) {
            flex: 1;
            padding-bottom: 10px;
            padding-left: 20px;
        }

        textarea {
            resize: none;
            outline: none;
            width: 100%;
            height: 180px;
            border: 1px solid;
            border-radius: 6px;
            padding: 6px 4px;
        }

        input {
            padding: 10px 0;
            font-size: 16px;
            color: #000;
            letter-spacing: 1px;
            border: none;
            border-bottom: 1px solid #03a9f4;
            outline: none;
            background: transparent;
        }

        button {
            padding: 6px 4px;
            background-color: #03a9f4;
            border: none;
            outline: none;
            color: #fff;
            padding:10px 20px;
            cursor: pointer;
            border-radius: 4px;
        }

        #header span {
            animation: animate 1s linear infinite;
        }

        #header span:nth-child(1) {
            animation-delay: 0s;
        }

        #header span:nth-child(2) {
            animation-delay: 0.2s;
        }

        #header span:nth-child(3) {
            animation-delay: 0.4s;
        }

        #header span:nth-child(4) {
            animation-delay: 0.6s;
        }

        #header span:nth-child(5) {
            animation-delay: 0.8s;
        }

        @keyframes animate {
            0%, 80% {
                color: #333;
                text-shadow: none;
            }
            100% {
                color: #888;
                text-shadow: 0 0 10px #888,
                0 0 20px #888,
                0 0 40px #888,
                0 0 80px #888,
                0 0 120px #888,
                0 0 160px #888;
            }
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header">
            <span>简</span>
            <span>易</span>
            <span>聊</span>
            <span>天</span>
            <span>室</span>
        </div>
        <div id="content">
            <div class="item">
                <div>聊天消息内容:</div>
                <div>
                    <textarea id="text_chat_content" readonly></textarea>
                </div>
            </div>
            <div class="item">
                <div>用户:</div>
                <div>
                    <input id="in_user_name" value="" />
                    <button id="btn_join">加入聊天室</button>
                    <button id="btn_exit">离开聊天室</button>
                </div>
            </div>
            <div class="item">
                <div>消息:</div>
                <div>
                    <input id="in_msg" />
                    <button id="btn_send">发送消息</button>
                </div>
            </div>
        </div>

    </div>

    <script type="text/javascript">
        $(function () {

            const urlPrefix = 'ws://localhost:8979/chat-room/'

            let socket = null
            
            $(document).on('click', '#btn_join', function () {
                const username = $('#in_user_name').val()
                const url = urlPrefix + username
                socket = new WebSocket(url)

                socket.onopen = function () {
                    console.log('连接开启')
                }

                socket.onmessage = function (ev) {
                    $('#text_chat_content').append(ev.data + '\n')
                }

                socket.onclose = function (ev) {
                    console.log('连接关闭')
                }

            })
            
            $(document).on('click', '#btn_send', function () {
                const msg = $('#in_msg').val()
                if(socket && socket.readyState === WebSocket.OPEN) {
                    socket.send(msg)
                    $('#in_msg').val('')
                }
            })
            
            $(document).on('click', '#btn_exit', function () {
                if(socket && socket.readyState === WebSocket.OPEN) {
                    const username = $('#in_user_name').val()
                    $('#text_chat_content').append('用户[' + username + ']离开了聊天室\n')
                    socket.close()
                }
            })

        })
    </script>
</body>
</html>